<template>
  <div class="setting">
    <div class="setting_box">
      <div class="setting_box_head">打标</div>
      <div class="setting_box_main">
        <el-form ref="form" :model="form" label-width="90px" size="mini">
          <el-form-item label="名称">
            <el-input v-model="form.title" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="logo">
            <input type="file" v-on:change="onUpload()" ref="fileInput" />
            <div class="el-upload__tip">*注：上传logo尺寸最大 58*58</div>
          </el-form-item>
          <el-form-item label="客服二维码">
            <el-row>
              <el-col :span="24">
                <el-upload
                  class="upload-demo"
                  action="https://dev.kizokulife.com/api/user/file"
                  :on-remove="codehandleRemove"
                  multiple
                  :limit="1"
                  :file-list="fileList"
                  :on-success="codehandleExceed"
                >
                  <el-button size="small" icon="el-icon-upload">点击上传</el-button>
                  <div class="el-upload__tip">*注：上传二维码尺寸最大 20*20</div>
                </el-upload>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确 定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="setting_box">
      <div class="setting_box_head">勾选卖方</div>
      <div class="setting_box_main" style="overflow: auto;">
        <div class="setting_box_main_list" v-for="(item,index) in sellingPartyList" :key="index">
          <div class="left">{{item.name}}</div>
          <div class="right">
            <el-checkbox v-model="item.checked" @change="changeState(item.id,item.checked)"></el-checkbox>
          </div>
        </div>
      </div>
    </div>
    <div class="setting_box">
      <div class="setting_box_head">调价</div>
      <div class="setting_box_main">
        <el-form ref="form" :model="pricesForm" label-width="90px" size="mini">
          <el-form-item label="最优价">
            <el-radio v-model="pricesForm.is_best_price" label="1" size="mini">调价</el-radio>
            <el-radio v-model="pricesForm.is_best_price" label="0" size="mini">不调价</el-radio>
          </el-form-item>
          <el-form-item label="最优价上浮">
            <el-col :span="18">
              <el-input v-model="pricesForm.come_up_ratio" size="mini"></el-input>
            </el-col>
            <el-col class="line" :span="2">%</el-col>
          </el-form-item>
          <el-form-item label="最优价加价">
            <el-col :span="18">
              <el-input v-model="pricesForm.come_up_price" size="mini"></el-input>
            </el-col>
            <el-col class="line" :span="3">万元</el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="pricesSubmit ">确 定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <imageCropperCodal
      :visible="cropperVisible"
      :url="file"
      :auto-crop-width="autoCropWidth"
      :auto-crop-height="autoCropHeight"
      @cancel="cropperVisible = false"
      @confirm="onConfirm"
    />
  </div>
</template>

<script>
import {
  userAdjust,
  userMarking,
  userCompany,
  userSavecompany,
  potsfile
} from "@/api/team/index";
import imageCropperCodal from "./imageCropperCodal.vue";
import { mapGetters } from "vuex";
export default {
  name: "Geometry1Setting",
  components: {
    imageCropperCodal
  },
  data() {
    return {
      form: {
        title: "",
        logo: "",
        qr_code: ""
      },
      fileList: [],
      sellingPartyList: [],
      pricesForm: {
        is_best_price: "1",
        come_up_price: "",
        come_up_ratio: ""
      },
      files: [],
      cropperVisible: false,
      autoCropWidth: "56",
      autoCropHeight: "56",
      file: "",
      fileName: ""
    };
  },
  computed: {
    ...mapGetters(["userinfo"])
  },
  mounted() {
    this.getuserCompany();
  },

  methods: {
    async onSubmit() {
      const data = await userMarking({
        ...this.form,
        user_id: this.userinfo.id
      });
      if (data.msg == "打标成功") {
        this.$message({
          type: "success",
          message: data.msg
        });
      } else {
        this.$message({
          type: "error",
          message: data.msg
        });
      }
    },
    logohandleSuccess(response) {
      this.form.logo = response.data.url;
    },
    logohandleRemove() {
      this.form.logo = "";
    },
    codehandleExceed(response) {
      console.log(response);
      this.form.qr_code = response.data.url;
    },
    codehandleRemove() {
      this.form.qr_code = "";
    },
    handleExceed(files, fileList) {
      let width = 150;
      let height = 50;
      const isSize = new Promise(function(resolve, reject) {
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          this.$message({
            message: `上传图片最大尺寸只能是${width}*${height}px!请重新选择!`,
            type: "warning"
          });
          return Promise.reject(); //必须加上return false; 才能阻止
        }
      );
      // console.log(isSize);
      return isSize;
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //调价
    async pricesSubmit() {
      const data = await userAdjust({ ...this.pricesForm, user_id: 26 });
      if (data.code == 1) {
        this.$message({
          type: "success",
          message: data.msg
        });
      }
      console.log(data);
    },
    async getuserCompany() {
      const { data } = await userCompany({ user_id: 39 });
      this.sellingPartyList = data;
      console.log(data);
    },
    async changeState(company_id, is_label) {
      const data = await userSavecompany({ user_id: 39, company_id, is_label });
      console.log(data);
    },
    async onUpload(e) {
      const file = this.$refs.fileInput.files[0];
      console.log(file);
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = () => {
        this.file = fileReader.result;
        this.cropperVisible = true;
        this.fileName = file.name;
      };
    },
    async onConfirm(files) {
      var aa = this.blobToBase64(files);
      aa.then(async res => {
        const { data } = await potsfile({ logoImg: res });
        this.form.logo = data.url;
      });
      this.cropperVisible = false;
    },
    async blobToBase64(blob) {
      let buffer = await blob.arrayBuffer();
      let bytes = new Uint8Array(buffer);
      console.log(bytes);
      let binary = "";
      var len = bytes.byteLength;
      for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
      }
      var base64 = "data:image/webp;base64," + window.btoa(binary);
      return base64;
    }
  }
};
</script>

<style lang="less" scoped>
.setting {
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  margin-top: 20px;
  &_box {
    width: 400px;
    height: 400px;
    border-radius: 4px;
    background: #f7f7f7;
    margin-right: 20px;
    padding: 0 16px;
    box-sizing: border-box;
    &_head {
      width: 100%;
      text-align: left;
      margin-top: 16px;
      font-size: 16px;
      font-weight: 500;
      color: #1e2024;
      height: 50px;
      box-sizing: border-box;
    }
    &_main {
      width: 100%;
      height: calc(100% - 66px);
      /deep/ .el-upload {
        text-align: left;
      }
      /deep/ .el-form-item__content {
        text-align: left;
      }
      &_list {
        width: 156px;
        height: 36px;
        display: flex;
        &:nth-child(odd) {
          background: #d1d0d0;
        }
        &:nth-child(even) {
          background: #ffffff;
        }
        .left {
          width: 120px;
          height: 100%;
          line-height: 36px;
          border-right: 1px solid #f0f0f0;
          box-sizing: border-box;
        }
        .right {
          width: 36px;
          height: 100%;
          box-sizing: border-box;
          line-height: 36px;
        }
      }
    }
  }
  .image-cropper-dialog {
    .vue-cropper {
      height: 500px;
    }
  }
}
</style>